<template>
  <view>
    <uni-nav-bar1 title="农业知识讲堂（科技云）" fixed leftIcon="arrowleft" statusBar :border="false" color="#fff"></uni-nav-bar1>
    <view class="top-box" @click="$util.goUrl(`/pages/videoList`)">
      <view class="item">
        <view class="con">
          <view class="tit">农技百科</view>
          <view class="txt">农业技术百科全书</view>
        </view>
        <image src="../static/k2.png" style="width: 100%; height: 100%" />
      </view>
      <view class="item">
        <view class="con">
          <view class="tit">春耕课程</view>
          <view class="txt">耕作技术必备</view>
        </view>
        <image src="../static/k1.png" style="width: 100%; height: 230rpx; position: absolute; top: -4rpx" />
      </view>
      <view class="item">
        <view class="con">
          <view class="tit">鲜果农技</view>
          <view class="txt">鲜果种植技术</view>
        </view>
        <image src="../static/k3.png" style="position: absolute; width: 100%; height: 100%" />
      </view>
    </view>
    <view class="tit-box">
      <view class="txt">TOP</view>
      <view class="lab">最热门的视频课程</view>
    </view>
    <!-- 左右单行滑动样式 -->
    <videoItem5 :limit="12" :list="hotList" />
    <view class="tit-box"> <view class="txt">推荐</view>最近分享的视频 </view>
    <!-- 左右单行滑动样式 -->
    <videoItem :list="shareList" />
    <uni-load-more status="noMore"></uni-load-more>
  </view>
</template>
<script>
import videoItem5 from "@/components/videoItem5.vue";
import videoItem from "@/components/videoItem.vue";
export default {
  components: {
    videoItem5,
    videoItem,
  },
  data() {
    return {
      hotList: [],
      shareList: [],
    };
  },
  onLoad() {
    this.getData();
    this.getList();
  },
  methods: {
    getData() {
      const data = {
        knowledgeTypeId: 0,
        current: 1,
        size: 10,
        isRm: 1,
      };
      this.$axios({
        url: "farming/list",
        data,
      }).then((res) => {
        this.hotList = res.data;
      });
    },
    getList() {
      const data = {
        knowledgeTypeId: 0,
        current: 1,
        size: 10,
        isTj: 1,
      };
      this.$axios({
        url: "farming/list",
        data,
      }).then((res) => {
        this.shareList = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.top-box {
  height: 440rpx;
  .item {
    position: relative;
    float: left;
    width: 375rpx;
    height: 220rpx;
    font-weight: 600;
    background: #fff;
    overflow: hidden;
    .con {
      position: absolute;
      width: 100%;
      height: 100%;
      padding: 32rpx 0 0 28rpx;
      z-index: 1;
    }
    &:first-child {
      height: 440rpx;
      width: 375rpx;
    }
  }
  .tit {
    font-size: 44rpx;
    color: #222b45;
    line-height: 48rpx;
  }
  .txt {
    margin-top: 24rpx;
    font-size: 26rpx;
    font-weight: 600;
    color: #8f9bb3;
    line-height: 36rpx;
  }
}
.tit-box {
  height: 170rpx;
  padding: 42rpx 0 0 38rpx;
  color: #8f9bb3;
  font-size: 30rpx;
  .txt {
    margin-bottom: 32rpx;
    font-size: 34rpx;
    font-weight: 500;
    color: #222b45;
    line-height: 32rpx;
  }
}
</style>
